<template>
  <div>
    <basicContainer>
      <codemirror ref="newCm" v-model="sql" :options="cmOptions" @ready="onCmReady"></codemirror>
    </basicContainer>
  </div>
</template>

<script>
import 'codemirror/mode/sql/sql.js';
// 主题css
import 'codemirror/theme/solarized.css';
// require active-line.js
import 'codemirror/addon/selection/active-line.js';
// closebrackets
import 'codemirror/addon/edit/closebrackets.js';

export default {
  data() {
    return {
      sql: '',
      cmOptions: {
        tabSize: 4, // tabsize默认为4
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        mode: 'text/x-mysql', // 选择代码语言，我这里选的sql
        extraKeys: { Ctrl: 'autocomplete' }, //自动提示配置
        lineWrapping: true, // 自动换行
        theme: 'neat' // 主题根据需要自行配置
      }
    };
  },
  methods: {
    onCmReady(cm) {
      // 设置代码编辑框宽和高
      this.$refs.newCm.codemirror.setSize('-webkit-fill-available', 'auto');
    }
  }
};
</script>
<style scoped lang="less">
/deep/.CodeMirror {
  font-size: 14px;
  line-height: 200%;
  border: 1px solid #ccc;
}
</style>
